import React from 'react';
import { connect } from 'dva';
import { Button, Table, Form, Input, Popconfirm,DatePicker,Menu,Dropdown, Icon, Select,TreeSelect,   } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;
const RangePicker = DatePicker.RangePicker;
import { baseUrl,imgUrl } from '../../config/system';
import { getItem, inArray } from '../../utils/utils';
import AddInstockModal from '../../components/shelf/instock/AddInstockModal';
import InstockViewModal from '../../components/shelf/instock/InstockViewModal';
import InstockConfirmModal from '../../components/shelf/instock/InstockConfirmModal';
import SecondInstockModal from '../../components/shelf/instock/SecondInstockModal';
import EditTimeModal from '../../components/shelf/instock/EditTimeModal';
const permissionList = localStorage.getItem("permissions") ? JSON.parse(localStorage.getItem("permissions")) : {};
const data = permissionList.map(d => d);
function Instock({ dispatch, instock, loading, form }) {

    const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
    const { currentItem, modalVisible, assetList,modalType,detailList,viewDetailList,secondModalVisible} = instock
    const columns = [{
        title: '申请单号',
        dataIndex: 'id_',
        key: 'id_',
        width: 120,
    },{
        title: '所在机房',
        dataIndex: 'roomName',
        key: 'roomName',
        width: 150,
    },{
        title: '设备型号',
        dataIndex: 'modelNames',
        key: 'modelNames',
        width: 120,
    }
    ,{
        title: '预计执行时间',
        dataIndex: 'executeTime',
        key: 'executeTime',
        width: 120,
    },{
        title: '指定操作人',
        dataIndex: 'userName',
        key: 'userName',
        width: 80,
    },{
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 80,
        render: (value, row, index) => {
            return (
               // value==1?"未审批":value==2?"一级已审批":value==3?"二级已审批":value==8?"审批未通过":value==9?"完成":''
                value==1?"未完成":value==2?"处理中":value==3?"已完成":''
            )
        }
    },{
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 120,
    },{
        title: '操作',
        key: 'operation',
        width: 80,
        render: (text, record) => (
            <span>
            {(record.status<8)?(
              <span>
                <Dropdown overlay={
                    <Menu>
                         <Menu.Item>
                              <a onClick={onConfirmInstock.bind(null, record.id_)}>确认入库</a>
                          </Menu.Item>
                          <Menu.Item>
                              <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id_)}>
                              <a>删除</a>
                              </Popconfirm>
                          </Menu.Item>                       
                    </Menu>
                    }>
                    <a className="ant-dropdown-link">
                     操作<Icon type="down" />
                    </a>
                </Dropdown>
                <span className="ant-divider" />
                <a onClick={onViewItem.bind(null, record.id_)}>查看</a>
              </span>
            ):<a onClick={onViewItem.bind(null, record.id_)}>查看</a>}
            </span>
        ),
    }];

    const pagination = {
        current:instock.current,
        pageSize:instock.currentSize,
        total: instock.total,
        showSizeChanger: true,
        showTotal: (total => '共' + instock.total + '条'),
        onShowSizeChange(current, size) {
            dispatch({
                type: 'instock/queryList',
                payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
            });
        },
        onChange(current) {
            dispatch({
                type: 'instock/queryList',
                payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':instock.currentSize} },
            });
        },
    };
    function deleteHandler(id) {
        dispatch({
            type: 'instock/remove',
            payload: id,
            search:{...getFieldsValue(),...{'pageNum':instock.current, 'pageSize':instock.currentSize}},
        });
    }
    const submitHandle = () => {
        dispatch({
            type: 'instock/queryList',
            payload: { ...getFieldsValue() },
        });
    }

    function handleClear(){
      form.resetFields();
    }

    const addHandler = () => {
        dispatch({
        type: 'instock/qryById',
            payload: {
                modalType: 'create',
            },
        })
    }
    //查看入库详情
    const onViewItem = (id) => {
        dispatch({
            type: 'instock/onViewItem',
            payload:id,
        })
    }

    // 弹出要入库的列表
    const onConfirmInstock = (id) => {
        dispatch({
            type: 'instock/onConfirmInstock',
            payload:id,
        })
    }

    // 更改入库单状态
    const instockUpdateStatus = (id,status) => {
        dispatch({
            type: 'instock/instockUpdateStatus',
            payload:{
              "id":id,
              "status":status
            },
            search:{...getFieldsValue(),...{'pageNum':instock.current, 'pageSize':instock.currentSize}},
        })
    }

    const modalProps = {
        item: instock.currentItem,
        visible: modalVisible,
        type: modalType,
        maskClosable: false,
        id:instock.pullOffId,
        assetList:assetList,
        dispatch: dispatch,
        userList:instock.userList,
        filePath:instock.filePath,
        assetType:instock.assetTypeTree,
        detailList:detailList,
        roomList:instock.roomList,
        assetBrandList:instock.assetBrandList,
        confirmLoading: loading,
        title: '新增入库单',
        wrapClassName: 'vertical-center-modal',
        newKey : instock.newKey,
        onOk (data) {
            dispatch({
                type: `instock/create`,
                payload: data,
            })
        },
        onCancel () {
            dispatch({
                type: 'instock/hideModal',
            })
        },
    }

    const viewModalProps = {
        item: instock.viewItem,
        visible: instock.viewModalVisible,
        dispatch: dispatch,
        maskClosable: false,
        viewDetailList:instock.viewDetailList,
        confirmLoading: loading,
        title: '查看入库单详情',
        wrapClassName: 'vertical-center-modal',
        newKey : instock.newKey,
        onCancel () {
            dispatch({
                type: 'instock/hideViewModal',
            })
        },
    }

    const editTimeModal = {
        item: instock.instockItem,
        visible: instock.addTimeModalVisible,
        maskClosable: false,
        confirmLoading: loading,
        title: `编辑入库时间`,
        wrapClassName: 'vertical-center-modal',
        dispatch: dispatch,
        newKey: instock.newKey1,
        onCancel() {
            dispatch({
                type: 'instock/updateState',
                payload:{addTimeModalVisible: false,instockItem:{}},
            })
        },
        onOk(values){
            for(var i =0;i<viewDetailList.length;i++){
                if(values.detailId == viewDetailList[i].id_){
                    viewDetailList[i].instockTime = values.instockTime;
                    viewDetailList[i].desc = values.desc;
                }
            }
            dispatch({
                type: 'instock/updateState',
                payload: {viewDetailList: viewDetailList,addTimeModalVisible: false,instockItem:{}}
            })
        }
    }

    const confirmModalProps = {
        item: instock.viewItem,
        visible: instock.editModalVisible,
        maskClosable: false,
        dispatch: dispatch,
        viewDetailList:viewDetailList,
        confirmLoading: loading,
        title: '确认入库',
        wrapClassName: 'vertical-center-modal',
        newKey : instock.newKey,
        //确认修改上架
        onOk (data) {
            dispatch({
                type: `instock/confirmInstock`,
                payload: data,
                search:{...getFieldsValue(),...{'pageNum':instock.current, 'pageSize':instock.currentSize}},
            })
        },
        onCancel () {
            dispatch({
                type: 'instock/hideEditModal',
            })
        },
     }

    const secondModalProps = {
        item: instock.assetItem,
        visible: secondModalVisible,
        assetList:assetList,
        userList:instock.userList,
        assetType:instock.assetTypeTree,
        detailList:detailList,
        roomList:instock.roomList,
        assetBrandList:instock.assetBrandList,
        assetModelList:instock.assetModelList,
        assetCurrent:instock.assetCurrent,
        assetCurrentSize:instock.assetCurrentSize,
        assetTotal:instock.assetTotal,
        maskClosable: false,
        dispatch: dispatch,
        confirmLoading: loading,
        title: '新增入库明细',
        wrapClassName: 'vertical-center-modal',
        newKey : instock.newKey,
        onCancel () {
            dispatch({
                type: 'instock/hideSecondModal',
            })
        },
    }


    let roomsList = [];
    for (let i = 0; i < instock.roomList.length; i++) {
      roomsList.push(<Option key={instock.roomList[i].id_}>{instock.roomList[i].name}</Option>);
    }

    return (
        <div style={{backgroundColor:'#fff'}}>
          <div style={{minHeight:'100%'}}>
              <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px'}}>
                  <Form layout="inline" >
                    <FormItem>
                            {
                            getFieldDecorator('roomId')(
                             <Select
                                  showSearch
                                  style={{ width: 200 }}
                                  placeholder="选择机房"
                                  optionFilterProp="children"
                              >
                                 <Option value="">全部</Option>
                                  {roomsList}
                              </Select>
                            )
                         }
                    </FormItem>
                    <FormItem>
                            {getFieldDecorator('userName')(
                                <Input type="text" placeholder="操作人" style={{ width:'130px' }} />
                            )}
                    </FormItem>
                    <FormItem>
                           {getFieldDecorator('executeTime')(
                                <RangePicker   style={{ width:'250px' }}  format="YYYY-MM-DD" />
                            )}
                    </FormItem>


                    <FormItem>
                        {getFieldDecorator('status')(
                            <Select
                                showSearch
                                style={{ width: 130 }}
                                placeholder="选择状态"
                                optionFilterProp="children"
                        >
                              <Option value="">全部</Option>
                              <Option value="1">未完成</Option>
                              <Option value="2">处理中</Option>
                              <Option value="3">已完成</Option>
                            </Select>
                        )}
                    </FormItem>
                    <FormItem>
                        <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                    </FormItem>
                    <FormItem>
                        <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                    </FormItem>
                      <div style={{marginTop:'-40px',textAlign:'right',paddingRight:'10px'}}>
                          <FormItem>
                              <Button type="primary" size='large' onClick={addHandler}>新增入库单</Button>
                          </FormItem>
                      </div>
                </Form>
            </div>
            <div style={{width:'100%',padding:"20px 20px",}}>
                <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={instock.list} pagination={pagination}
                />
            </div>
            </div>

            <AddInstockModal {...modalProps} />
            <InstockViewModal {...viewModalProps} />
            <InstockConfirmModal {...confirmModalProps} />
            <SecondInstockModal {...secondModalProps} />
            <EditTimeModal {...editTimeModal}/>
        </div>
    );
}

function mapStateToProps(state) {
  return { instock : state.instock,loading:state.loading.models.instock};
}

Instock = Form.create()(Instock);

export default connect(mapStateToProps)(Instock);
